@import '../../stylesheets/base';
@import '../../stylesheets/variables';

.result-header {
  padding: $global-spacing * 3;
  padding-bottom: $global-spacing;
  display: flex;
  align-items: center;

  @media screen and (max-width: 40em) {
    padding: $global-spacing * 2;
  }
}

.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 6px);
  //border-top: 3px dashed #333;
  //border-bottom: 3px dashed #333;
  //border-width: 3px 0;
}

.result-header--right-section {
  margin-left: auto;
}

.github-logo {
  width: 30px;
  height: 30px;

  @media screen and (max-width: 40em) {
    width: 20px;
    height: 20px;
  }

  path {
    fill: #666;
    transition: fill 0.2s;
  }

  &:hover {
    path {
      fill: black;
    }
  }
}

.logo-small {
  @include font-size-reg;
  text-transform: uppercase;
  font-weight: $font-weight-very-bold;
  letter-spacing: 3px;
  user-select: none;
  cursor: pointer;
  color: #212121;
}

.logo-small__alt {
  color: #888;
}

.compare__search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;

  @media screen and (max-width: 40em) {
    padding: 0 $global-spacing * 2;
  }
}

.compare__search-inputs {
  display: flex;
  align-items: center;
  margin-top: -15vh;
  max-width: $global-spacing * 78;
}

.compare__vs {
  @include font-size-xl;
  //color: $raven;
  font-weight: $font-weight-thin;
  margin: 0 $global-spacing;
}
